<template>
    <ul class="nav">
      <li><router-link to="/Recommend">推荐音乐</router-link></li>
      <li><router-link to="/hot">热歌榜</router-link></li>  
      <li><router-link to="/search">搜索</router-link></li>
    </ul>
</template>
<style lang="less" scoped>
.nav{
    position: sticky;
    z-index: 2;
    top: 0px;
    background-color: #fff;
    display: flex;
    border-bottom: solid #ccc 1px;
    li{
        line-height:40px;
        text-align: center; 
        flex:1;
        a{
            font-size:15px;
            padding:0px 5px;
            display: inline-block;
            color:#333;
            position: relative;
            &.router-link-exact-active{
                color:#dd001b;
                &::after{
                    content:"";
                    position: absolute;
                    bottom: -1px;
                    left:0px;
                    height: 0px;
                    width:100%;
                    overflow: hidden;
                    border-bottom:2px solid #dd001b;
                }
            }
        }
    }
}
</style>